<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-06 20:28:08
 * @Description  : 部门空间概览表格
-->

<template>
  <div class="flex flex-wrap pb-4 justify-between my-con">
    <wp-data-table
      v-loading="loading"
      class="min-w-[400px] w-[800px] my-table min-h-[460px]"
      :data="data"
      :checked-row-keys="checkedRowKeys"
      :columns="columns"
      @item-click="handleItemClick"
      @page-change="handlePageChange"
      @select-change="handleSelectChange"
      :pages="pageResultInfo.pages"
      :total="pageResultInfo.total"
      :handle-load="handleLoad"
      :is-sort="false"
    >
    </wp-data-table>

    <pie-chart
      chart-id="dep-pie-chart"
      :target-type="2"
      :target-id="checkedRowKeys[0]?.id || '-1'"
      :sub-title="checkedRowKeys[0]?.name || ''"
    ></pie-chart>
  </div>
</template>

<script lang="ts" setup>
import { useMessage } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { getDepartmentByPage } from '@/api/department'
import type { DepartmentRes } from '@/types/department'
import { formatTime, convertFromBytes } from '@/utils/index'

const message = useMessage()

const data = ref<DepartmentRes[]>([])

const handleItemClick = (row: DepartmentRes) => {
  checkedRowKeys.value = [row]
}

const pageInfo = reactive({
  page: 1,
  pageSize: 50
})

const pageResultInfo = reactive({
  pages: 0,
  total: 0
})
const loading = ref(false)

const handlePageChange = (page?: number, pageSize?: number) => {
  page && (pageInfo.page = page)
  pageSize && (pageInfo.pageSize = pageSize)
  message.success('page')
}

const handleSelectChange = (keys: string[], rows: DepartmentRes[]) => {
  checkedRowKeys.value = rows
}

const createColumns = (): DataTableColumns<DepartmentRes> => {
  return [
    {
      type: 'selection',
      multiple: false,
      minWidth: 30,
      width: 30
    },
    {
      title: '部门名称',
      key: 'name',
      minWidth: 120,
      width: 120
    },
    {
      title: '已使用容量',
      key: 'sizeUse',
      minWidth: 120,
      width: 120,
      render(row) {
        return convertFromBytes(row.sizeUse)
      }
    },
    {
      title: '限定容量',
      key: 'sizeMax',
      minWidth: 120,
      width: 120,
      render(row) {
        const sizeMax = convertFromBytes(row.sizeMax)
        return sizeMax === '0B' ? '无限制' : sizeMax
      }
    },
    {
      title: '创建时间',
      key: 'createTime',
      minWidth: 150,
      width: 150,
      render(row) {
        return formatTime(row.createTime)
      }
    }
  ]
}

const checkedRowKeys = ref<DepartmentRes[]>([])

const columns = createColumns()

// 加载根部门数组
const initDeps = async () => {
  const res = await getDepartmentByPage({ page: 1, pageSize: 999, pid: '1' })
  data.value = res.data.items.map((item) => {
    return {
      ...item,
      isLeaf: !!item.isLeaf
    }
  })
  pageResultInfo.pages = res.data.pages
  pageResultInfo.total = res.data.total
}

const handleLoad = (row: Record<string, unknown>) => {
  return new Promise<void>((resolve) => {
    // 加载部门下的用户，加载部门下的子部门
    Promise.all([
      getDepartmentByPage({ page: 1, pageSize: 999, pid: row.id as string })
    ])
      .then(([res1]) => {
        const newDeps = res1.data.items.map((item) => {
          return {
            ...item,
            isLeaf: !!item.isLeaf
          }
        })

        row.children = newDeps
      })
      .finally(() => {
        resolve()
      })
  })
}

onMounted(() => {
  initDeps()
})
</script>
<style scoped lang="scss">
@media (max-width: 1200px) {
  .my-con {
    justify-content: center !important;
    flex-wrap: wrap;
    .my-table {
      width: 100%;
    }

    .chart {
      width: 100%;
      margin-top: 12px;
    }
  }
}
</style>
